//获取DOM封装
var $ = function (className) {
  return document.getElementsByClassName(className)[0];
};
// 获取DOM
var smallImg = $("small-img");
var smallImage = $("small-img").getElementsByTagName("img")[0];
var ball = $("ball");
var bigImg = $("big-img").getElementsByTagName("img")[0];
var thums = $("thum").getElementsByTagName("li");

// 鼠标移动到缩略图上时更改小图和大图并与缩略图一致
for (var i in thums) {
  thums[i].onmouseover = show;
  thums[i].onclick = show;
  // 方法一：通过对获取到的图片的src进行切割获取到下标
  /* thums[i].onmouseover = function () {
    console.log(this.getElementsByTagName("img")[0].src);
    var index = this.getElementsByTagName("img")[0].src.substr(-5, 1);
    console.log(index);
  }; */
}
// 方法二：因为直接在事件的回调函数中无法拿到下标i，
// 因此在事件的回调函数中再次遍历通过判断与事件的实例化对象相等时获取到下标
function show() {
  for (var i in thums) {
    if (thums[i] == this) {
      // console.log(i);
      // 更改小图和大图的src
      index = parseInt(i) + 1;
      smallImage.src = "./images/small0" + index + ".jpg";
      bigImg.src = "./images/big0" + index + ".jpg";

      // 设置激活状态
      thums[i].className = "active";
    } else {
      thums[i].className = "";
    }
  }
}

// 设置放大镜
smallImg.onmousemove = function (e) {
  var e = e || window.event;
  //鼠标在小图上移动时显示放大镜和大图
  ball.style.display = "block";
  bigImg.style.display = "block";

  // 获取鼠标的坐标
  // 通过事件对象e来获取坐标
  // var mouseX = (e.offsetX || e.layerX)-ball.offsetWidth/2;
  // var mouseY = (e.offsetY || e.layerY)-ball.offsetHeight/2;
  var mouseX = e.clientX - ball.offsetWidth / 2 - 100;
  var mouseY = e.clientY - ball.offsetHeight / 2 - 20;
  // console.log(mouseX, mouseY);
  // 越界处理
  if (mouseX < 0) {
    mouseX = 0;
  } else if (mouseX >= smallImg.clientWidth - ball.offsetWidth) {
    mouseX = smallImg.clientWidth - ball.offsetWidth;
    // console.log(ball.offsetWidth == ball.clientWidth); //true 无滚动条时
  }
  if (mouseY < 0) {
    mouseY = 0;
  } else if (mouseY >= smallImg.clientHeight - ball.offsetHeight) {
    mouseY = smallImg.clientHeight - ball.offsetHeight;
  }

  //更改放大镜的位置
  ball.style.left = mouseX + "px";
  ball.style.top = mouseY + "px";

  // 更改大图的位置
  // -2.28:负号表示反向移动 ，2，28表示缩放比例
  // 大图的显示随着放大镜位置的改变而改变，但大图是改变的是图片的位置，因此需要反向移动
  // 大图与小图有2.28倍的放缩比例，在通过小图的鼠标位置改变大图时需要*2.28得到大图位置
  bigImg.style.left = mouseX * -2.28 + "px";
  bigImg.style.top = mouseY * -2.28 + "px";

  //鼠标离开时放大镜和大图隐藏
  smallImg.onmouseleave = function () {
    ball.style.display = "none";
    bigImg.style.display = "none";
  };
};
